<template>
  <div>
    <div style="float: left">
      <el-button type="primary" @click="initMap" class="btn_come">{{
        bu_ti
      }}</el-button>
      <el-button type="primary" @click="back" class="back_btn">
        <i class="iconfont icon-return"></i>
      </el-button>
    </div>
    <div id="container" style="height: 600px; margin-top: 50px"></div>
    <div id="panel"></div>
  </div>
</template>

<style type="text/css">
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 50px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.btn_come {
  height: 40px;
  position: absolute;
  top: 10px;
  left: 0;
}
.back_btn {
  height: 40px;
  color: #fff;
  z-index: 999;
  position: absolute;
  left: 90px;
  top: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      bu_ti: "",
      lat: 0,
      lng: 0,
      map: {},
      go: true,
    };
  },
  created() {
    console.log(this.$route.query.latitude, this.$route.query.longitude);
  },
  mounted() {
    setTimeout(() => {
      this.initMap();
      this.getLocation();
    }, 1000);
  },
  methods: {
    initMap() {
      if (this.go == 1) {
        this.bu_ti = "到这去";
        this.map = new AMap.Map("container", {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 11, //初始化地图层级
          center: [this.$route.query.longitude, this.$route.query.latitude], //初始化地图中心点
        });
        var marker = new AMap.Marker({
          position: new AMap.LngLat(
            this.$route.query.longitude,
            this.$route.query.latitude
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        });
        this.map.add(marker);
        this.go = 0;
      } else {
        this.go = 1;
        this.route_planning();
      }
    },
    back() {
      this.$router.push({
        path: "/hos/index",
      });
    },
    getLocation() {
      navigator.geolocation.getCurrentPosition(
        (res) => {
          this.lat = res.coords.latitude;
          this.lng = res.coords.longitude;
        },
        (err) => {
          console.log(err);
        },
        {
          enableHighAccuracy: true, //高精度定位
          timeout: 5000,
          maximumAge: 0,
        }
      );
    },
    route_planning() {
      this.bu_ti = "不去了";
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [this.lng, this.lat], //地图中心点
        zoom: 13, //地图显示的缩放级别
      });
      //构造路线导航类
      var driving = new AMap.Driving({
        map: this.map,
        panel: "panel",
      });
      // 根据起终点经纬度规划驾车导航路线
      driving.search(
        new AMap.LngLat(this.lng, this.lat),
        new AMap.LngLat(
          this.$route.query.longitude,
          this.$route.query.latitude
        ),
        function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            log.success("绘制驾车路线完成");
          } else {
            log.error("获取驾车数据失败：" + result);
          }
        }
      );
    },
  },
};
</script>